<template>
  <view class="pay-wrap">
    <view class="nav-gap"></view>
    <view class="card amount-card">
      <view class="amount-row">
        <view class="currency">¥</view>
        <input class="amount-input" type="number" v-model.number="amount" placeholder="请输入金额" />
        <view class="gain" v-if="Number(amount) > 0">本次可获得 <text class="hl">{{ Number(amount) * 10 }}</text> H币</view>
      </view>
      <view class="note">充值比例：1 元 = 10 H币（所有渠道一致）。</view>
    </view>

    <view class="card pay-card">
      <view class="title">选择充值方式</view>
      <view class="pay-item" v-for="c in channels" :key="c.value" @click="selectedChannel = c.value">
        <view class="left">
          <view class="logo" :class="c.cls">{{ c.icon }}</view>
          <view class="name">{{ c.label }}</view>
        </view>
        <view class="radio" :class="{ checked: selectedChannel === c.value }"></view>
      </view>
    </view>

    <view class="footer">
      <button class="primary" :loading="loading" :disabled="loading" @click="submit">充值</button>
    </view>
  </view>
</template>

<script>
import { rechargeHcoin } from '@/api/patient.js'

export default {
  name: 'WalletPay',
  data() {
    return {
      amount: null,
      selectedChannel: 11, // 默认微信
      channels: [
        { label: '微信支付', value: 11, icon: '微', cls: 'wechat' },
        { label: '支付宝支付', value: 12, icon: '支', cls: 'alipay' },
        { label: '余额支付', value: 1, icon: '￥', cls: 'balance' },
      ],
      loading: false,
      navigating: false,
    }
  },
  onLoad(query) {
    const a = Number(query?.amount)
    if (Number.isFinite(a) && a > 0) this.amount = a
    const ch = Number(query?.channel)
    if ([1,11,12].includes(ch)) this.selectedChannel = ch
  },
  methods: {
    genRequestId() {
      return `${Date.now()}_${Math.random().toString(36).slice(2, 10)}`
    },
    valid() {
      if (this.amount == null || this.amount === '') {
        uni.showToast({ title: '请输入金额', icon: 'none' })
        return false
      }
      const n = Number(this.amount)
      if (!Number.isFinite(n) || n <= 0) {
        uni.showToast({ title: '金额需大于0', icon: 'none' })
        return false
      }
      return true
    },
    async submit() {
      if (this.loading) return
      if (!this.valid()) return
      try {
        this.loading = true
        const reqId = this.genRequestId()
        const coins = Math.floor(Number(this.amount) * 10)
        await rechargeHcoin(coins, this.selectedChannel, reqId)
        // 直接跳转成功页，避免 toast + 动画造成闪烁
        this.navigating = true
        const qs = `?amount=${encodeURIComponent(this.amount)}&channel=${this.selectedChannel}`
        uni.redirectTo({
          url: `/pages/wallet/rechargeSuccess${qs}`,
          fail: () => {
            // 跳转失败时恢复状态并提示
            this.navigating = false
            this.loading = false
            uni.showToast({ title: '跳转失败', icon: 'none' })
          }
        })
      } catch (e) {
        const msg = e?.msg || e?.message || '充值失败'
        uni.showToast({ title: msg, icon: 'none' })
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-wrap { min-height: 100vh; background: #f5f6f7; padding-bottom: env(safe-area-inset-bottom, 0); }
.nav-gap { height: var(--status-bar-height, 0px); }
.card { background: #fff; border-radius: 16rpx; margin: 20rpx 24rpx; padding: 24rpx; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.04); }

.amount-card { padding: 28rpx 24rpx; }
.amount-row { display: flex; align-items: center; }
.currency { font-size: 44rpx; color: #2a7cff; font-weight: 600; margin-right: 12rpx; }
.amount-input {
  flex: 1; height: 84rpx; line-height: 84rpx; padding: 0 18rpx; background: #f7f8fa; border-radius: 12rpx; box-sizing: border-box; font-size: 34rpx;
}
.gain { margin-left: 12rpx; font-size: 26rpx; color: #666; white-space: nowrap; }
.gain .hl { color: #2a7cff; font-weight: 600; }
.note { margin-top: 10rpx; color: #9aa0a6; font-size: 24rpx; }

.title { font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
.pay-item { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 4rpx; border-bottom: 1px solid #f0f2f5; }
.pay-item:last-child { border-bottom: none; }
.pay-item .left { display: flex; align-items: center; gap: 16rpx; }
.logo { width: 56rpx; height: 56rpx; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; }
.logo.wechat { background: #22c55e; }
.logo.alipay { background: #2a7cff; }
.logo.balance { background: #9ca3af; }
.name { font-size: 28rpx; color: #333; }
.radio { width: 34rpx; height: 34rpx; border-radius: 50%; border: 2rpx solid #cfd4dc; box-sizing: border-box; }
.radio.checked { border-color: #2a7cff; background: radial-gradient(circle at center, #2a7cff 0 50%, transparent 51%); }

.footer { position: sticky; bottom: 0; padding: 16rpx 24rpx env(safe-area-inset-bottom, 16rpx); background: #f5f6f7; }
.primary { width: 100%; height: 84rpx; line-height: 84rpx; border-radius: 12rpx; background: #2a7cff; color: #fff; font-size: 32rpx; }
</style>
